<template>
  <el-card>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公共管理</el-breadcrumb-item>
      <el-breadcrumb-item>规章制度管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索框 -->
    <el-row :gutter="30">
      <el-col :span="10">
        <el-input placeholder="请输入内容" v-model="queryInfo.keyWord" clearable @clear="getAllRegular">
          <el-button slot="append" icon="el-icon-search" @click="getAllRegular"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addDialogVisible = true">新增规章制度</el-button>
      </el-col>
    </el-row>
    <!-- 主体 -->
    <el-table :data="regularList" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="发布人" prop="userName"></el-table-column>
      <el-table-column label="发布时间" prop="createTime"></el-table-column>
      <el-table-column label="制度概述" prop="regularTitle"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="查看" placement="bottom">
            <el-button type="primary" size="mini" icon="el-icon-tickets" @click="lookRegular(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="修改" placement="bottom">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="editRegular(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="bottom">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-delete"
              @click="removeRegular(scope.row.id)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 发布对话框 -->
    <el-dialog class="addRegular-dialog" width="80%" title="发布规章制度" :visible.sync="addDialogVisible">
      <el-input type="textarea" :rows="1" placeholder="请输入制度标题" v-model="addRegularTitle"></el-input>
      <quill ref="quillRef" @emitContent="emitContent"></quill>
      <el-button type="primary" @click="addRegular()"> 发布</el-button>
    </el-dialog>
    <!-- 查看对话框 -->
    <el-dialog width="80%" :title="regularItem.regularTitle" :visible.sync="lookDialogVisible">
      <div v-html="lookItemDesc">
        {{ lookItemDesc }}
      </div>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog width="80%" title="修改规章制度" :visible.sync="editDialogVisible" :before-close="editVisibleClose">
      <el-input v-model="editTitle" placeholder="请输入修改过后的规章制度标题"></el-input>
      <editQuill @emitEditContent="emitEditContent" :editContent="editContent"></editQuill>
      <el-button @click="editBtn" type="primary">提交修改</el-button>
    </el-dialog>
  </el-card>
</template>

<script>
import commonServe from '../../api/services/common.serve'
import quill from '../../components/quillEditor/quillEditor.vue'
import editQuill from '../../components/editQuillEditor/quillEditor.vue'
export default {
  components: {
    quill,
    editQuill
  },
  data() {
    return {
      userId: window.sessionStorage.getItem('userId'),
      queryInfo: {
        keyWord: '',
        pageSize: '',
        pageIndex: ''
      },
      addDialogVisible: false,
      lookDialogVisible: false,
      addRegularTitle: '', //制度标题
      regularList: [],
      regularContent: '', //子组件传过来的值
      regularItem: {},
      lookItemDesc: '', //转码后的内容
      editDialogVisible: false, //控制修改对话框
      // editItem: {},
      id: '',
      editTitle: '',
      editContent: '', //传给子组件
      reEditContent: '' //接收子组件传过来的内容
    }
  },
  created() {
    this.getAllRegular()
  },
  methods: {
    //   获取全部规章列表
    getAllRegular() {
      commonServe
        .getAllRegularList()
        .then((res) => {
          if (res.code === 200) {
            // this.$message.success('获取成功')
            console.log(res)
            this.regularList = res.data.list
          } else {
            this.$message.warning('获取失败')
          }
        })
        .catch((err) => {
          this.$message.warning(err.message)
        })
    },
    // 接收子组件传值
    emitContent(val) {
      // console.log(val, '子传父')
      this.regularContent = val
    },
    // 发布规章制度
    addRegular() {
      let params = {
        regularTitle: this.addRegularTitle,
        regularDesc: this.regularContent
      }
      if (!this.addRegularTitle || !this.regularContent) return this.$message.warning('制度标题或制度内容不能为空')
      commonServe
        .addRegular(this.userId, params)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('新闻发布成功')
            this.addRegularTitle = ''
            this.$refs.quillRef.$data.content = ''
            this.getAllRegular()
            this.addDialogVisible = false
          } else {
            this.$message.warning('新闻发布失败')
          }
        })
        .catch((err) => {
          this.$message.warning(err.message)
        })
    },
    // 删除制度
    async removeRegular(val) {
      console.log(val)
      const confirmResult = await this.$confirm('此操作将永久删除该规章制度，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除该用户')
      }
      // 调接口删除
      commonServe
        .removeRegularById(val)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.getAllRegular()
          } else {
            this.$message.warning('删除失败')
          }
        })
        .catch((err) => {
          this.$message.warning(err.message)
        })
    },
    // 查看制度
    lookRegular(val) {
      this.regularItem = val
      this.lookDialogVisible = true
      var decodeRegularDesc = val.regularDesc.replace(/&lt;/g, '<')
      var decodeRegularDesc = decodeRegularDesc.replace(/&gt;/g, '>')
      this.lookItemDesc = decodeRegularDesc
    },
    // 修改制度对话框
    editRegular(val) {
      console.log(val)
      this.id = val.id
      this.editTitle = val.regularTitle
      this.editContent = val.regularDesc
      this.editDialogVisible = true
    },
    // 接收修改过后传过来的值
    emitEditContent(val) {
      // console.log(val, 123)
      this.reEditContent = val
    },

    // 提交修改
    editBtn() {
      // console.log(this.editContent)
      let params = {
        id: this.id,
        regularTitle: this.editTitle,
        regularDesc: this.reEditContent
      }
      commonServe
        .editRegularById(params)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.getAllRegular()
            this.$message.success('修改本条规章制度成功')
            this.editDialogVisible = false
          } else {
            this.$message.warning('修改失败，请刷新重试')
            this.editDialogVisible = false
          }
        })
        .catch((err) => {
          this.$message.warning(err.message)
        })
    },

    // 修改对话框关闭
    editVisibleClose() {
      this.editTitle = ''
      this.editContent = ''
      this.editDialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.addRegular-dialog {
  .el-button {
    width: 100%;
    margin-top: 20px;
  }
}
</style>
